<template>
  <div class="body">
    <div class="mainBox">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel index">
          <p>标号区二级屏</p>
          <div class="go-home">
            <router-link to="/">
              <el-tooltip effect="dark" content="回到首页" placement="bottom">
                <i
                  class="iconfont icon-home"
                  style="font-size: 60px; color: #fff"
                ></i>
              </el-tooltip>
            </router-link>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 1-->
      <div class="column">
        <div class="panel bar" style="height: 1035px">
          <div class="no" style="height: 100px">
            <div class="no-bd">
              <ul>
                <li>计划待标号</li>

                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center; color: #fff"
                      >480</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>标号累计</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center; color: #fff"
                      >880</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>标号出场累计</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center; color: #fff"
                      >800</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
          </div>
          <div style="height: 400px">
            <div class="chart" id="stock">图表</div>
          </div>
          <div style="height: 350px">
            <div id="mount" style="height: 350px"></div>
          </div>
          <div class="no" style="height: 100px">
            <div class="no-bd">
              <ul>
                <li>今日标号量</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center; color: #fff"
                      >80</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>工地累计标号</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center; color: #fff"
                      >800</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>劳务队实到人数</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center; color: #fff"
                      >54</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >人</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="panel-footer"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 2-->
      <div class="column">
        <div class="panel task" style="height: 500px">
          <h class="hd">当日任务&进度</h>
          <div class="task-bd" style="height: 360px">
            <div class="task-bd-item">
              <ul>
                <li>标号当日计划</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center">80</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>实时标号数量</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center">70</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>标号计划入库</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center">80</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>实时入库数量</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center">40</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>预计消耗标号</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center">50</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>实际消耗数量</li>
                <li style="line-height: 60px">
                  <el-row
                    ><label style="width: 80%; text-align: center">15</label
                    ><label style="color: #077ec8; font-size: 25px; width: 20%"
                      >个</label
                    ></el-row
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel bar2" style="height: 520px">
          <div
            class="steam-chart"
            style="height: 300px; margin: auto; margin-bottom: 20px"
          >
            <div class="chart" id="steam" style="margin-top: 30px">图表</div>
          </div>
          <div class="steam-bottom" style="height: 120px">
            <div style="width: 150px; height: 100px; float: left">
              <ul>
                <li style="font-size: 22px; color: #077ec8">安全库存上限</li>
                <li
                  style="
                    font-family: electronicFont;
                    font-size: 50px;
                    line-height: 70px;
                    color: white;
                    text-align: center;
                  "
                >
                  80<a style="color: white; font-size: 40px; font-family: Arial"
                    >%</a
                  >
                </li>
              </ul>
            </div>
            <div style="width: 150px; height: 100px; float: left">
              <ul>
                <li style="font-size: 22px; color: #077ec8">安全库存下限</li>
                <li
                  style="
                    font-family: electronicFont;
                    font-size: 50px;
                    line-height: 70px;
                    color: white;
                    text-align: center;
                  "
                >
                  25<a style="color: white; font-size: 40px; font-family: Arial"
                    >%</a
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="column">
        <div class="panel bar2" style="height: 500px">
          <h2>半年标号产量&消耗（个）</h2>
          <div class="chart" id="output">图表</div>
          <div class="panel-footer"></div>
        </div>
        <div class="right-bottom">
          <div class="panel data" style="height: 520px">
            <header class="hd">材料余量监视</header>
            <div class="data-bd" style="height: 360px">
              <div class="data-bd-item">
                <ul>
                  <li
                    style="color: #077ec8; font-weight: bold; font-size: 26px"
                  >
                    标号工具
                  </li>
                  <li
                    style="
                      line-height: 60px;
                      font-family: electronicFont;
                      font-size: 40px;
                      color: white;
                    "
                  >
                    <el-row
                      ><label style="width: 80%; text-align: center">40</label>
                      <label style="color: #077ec8; font-size: 30px; width: 20%"
                        >套</label
                      >
                    </el-row>
                  </li>
                </ul>
              </div>
              <div class="data-bd-item">
                <ul>
                  <li
                    style="color: #077ec8; font-weight: bold; font-size: 26px"
                  >
                    颜料
                  </li>
                  <li
                    style="
                      line-height: 60px;
                      font-family: electronicFont;
                      font-size: 40px;
                      color: white;
                    "
                  >
                    <el-row
                      ><label style="width: 60%; text-align: center">50</label>
                      <label style="color: #077ec8; font-size: 30px; width: 40%"
                        >千克</label
                      >
                    </el-row>
                  </li>
                </ul>
              </div>
              <div class="data-bd-item">
                <ul>
                </ul>
              </div>
              <div class="data-bd-item">
                <ul>
                </ul>
              </div>
            </div>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox" style="height: 1px"></div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import * as echarts from "echarts";

export default {
  name: "EchartsC",
  setup() {
    onMounted(() => {
      // 基于准备好的dom，初始化echarts实例
      const myChart2 = echarts.init(document.getElementById("output"));
      const myChart3 = echarts.init(document.getElementById("stock"));
      const myChart4 = echarts.init(document.getElementById("steam"));
      const myChart6 = echarts.init(document.getElementById("mount"));

      // 绘制图表
      myChart2.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#000",
            },
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          data: ["标号生产", "标号消耗", "标号出场"],
        },
        xAxis: [
          {
            type: "category",
            data: ["07月", "08月", "09月", "10月", "11月", "12月"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: 15,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "标号生产",
            min: 0,
            max: 70,
            interval: 10,
            axisLabel: {
              formatter: "{value} 个",
              textStyle: {
                fontSize: 15,
                color: "#fff",
              },
            },
            // y轴的线条改为了 2像素
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            // y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255)",
              },
            },
            axisTick: {
              show: true,
            },
          },
          {
            type: "value",
            name: "标号消耗",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: "{value} 个",
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            // y轴的线条改为了 2像素
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            // y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255)",
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "标号生产",
            type: "bar",
            barGap: "10%",
            barWidth: 28,
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 12,
              //柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#1268f3", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#08a4fa", // 60% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#01ccfe", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "标号消耗",
            type: "bar",
            barWidth: 28,
            barGap: "5%",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 12,
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 1,
                    color: "#f787e6", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#c169d5",
                  },
                  {
                    offset: 0,
                    color: "#a158cc", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "标号出场",
            type: "line",
            smooth: true,
            showSymbol: false,
            yAxisIndex: 1,
            data: [4.5, 6.3, 10.0, 15.0, 85.0, 6.2],
            itemStyle: {
              normal: {
                color: "#27cb52", //折点颜色
                lineStyle: {
                  width: 5,
                },
              },
            },
          },
        ],
      });
      myChart3.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#000",
            },
          },
        },
        grid: {
          left: "7%",
          right: "6%",
          bottom: "15%",
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          data: ["标号生产已使用", "生产线暂存", "仓库标号库存"],
        },
        xAxis: [
          {
            type: "category",
            data: ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "F", "L1", "L2"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "标号生产已使用",
            min: 0,
            max: 80,
            interval: 10,
            axisLabel: {
              formatter: "{value} 个",
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            // y轴的线条改为了 2像素
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            // y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255)",
              },
            },
            axisTick: {
              show: true,
            },
          },
          {
            type: "value",
            name: "生产线暂存",
            min: 0,
            max: 8,
            interval: 2,
            axisLabel: {
              formatter: "{value} 个",
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            // y轴的线条改为了 2像素
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            // y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255)",
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "标号生产已使用",
            type: "bar",
            data: [60.0, 65.0, 68.0, 70.0, 69.0, 69.2, 70.1, 69.0, 69.2, 70.1],
            itemStyle: {
              // 修改柱子圆角

              barBorderRadius: 10,
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#1268f3", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#08a4fa", // 60% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#01ccfe", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "生产线暂存",
            type: "bar",
            data: [2.6, 5.9, 9.0, 6.4, 6.0, 2.3, 6.4, 6.0, 2.3, 2.0],
            itemStyle: {
              // 修改柱子圆角
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 1,
                    color: "#f787e6", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#c169d5",
                  },
                  {
                    offset: 0,
                    color: "#a158cc", // 100% 处的颜色
                  },
                ],
                false
              ),
              barBorderRadius: 10,
            },
          },
          {
            name: "仓库标号库存",
            type: "line",
            itemStyle: {
              normal: {
                color: "#27cb52", //折点颜色
                lineStyle: {
                  width: 4,
                },
              },
            },
            smooth: true,
            yAxisIndex: 1,
            data: [6.0, 2.0, 3.0, 2.0, 4.0, 2.0, 3.0, 2.0, 4.0, 2.4],
          },
        ],
      });
      myChart4.setOption({
        title: {
          text: "标号库存余量",
          textStyle: {
            color: "white",
            fontSize: 30,
            fontWeight: "normal",
          },
        },
        grid: {
          top: "20%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            data: ["型号A", "型号B", "型号C", "型号D", "型号E"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            show: false,
            type: "category",
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: {
          show: false,
        },
        series: [
          {
            name: "条",
            type: "bar",
            barWidth: 30,
            data: [70, 34, 60, 78, 69],
            xAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              barBorderRadius: 20,
              color: "#1089E7",
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%",
            },
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 30,
            xAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 1,
              barBorderRadius: 15,
            },
          },
        ],
      });
      myChart6.setOption({
        title: {
          textStyle: {
            fontSize: 22,
            fontWeight: "bolder",
            color: "#fff", // 主标题文字颜色
          },
          text: "各管片标号比例",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 20,
          left: "center",
          data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: 835, name: "型号A" },
              { value: 735, name: "型号B" },
              { value: 510, name: "型号C" },
              { value: 434, name: "型号D" },
              { value: 335, name: "型号E" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    });
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.body {
  border: yellow solid 2px;
  background: url("../../assets/img/echartsBackGround.jpg");
}

.mainBox {
  border: 5px solid blue;
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  height: 1075px;
  margin: 0 auto;
  padding: 10px 10px 0;
}

.mainBox .column {
  flex: 3;
}

.mainBox .column:nth-child(2) {
  flex: 5;
  margin: 0 10px 10px;
  overflow: hidden;
}

.mainBox .column:nth-child(4) {
  flex: 4;
  margin: 0 10px 15px;
  overflow: hidden;
}

.mainBox .panel {
  position: relative;
  height: 310px;
  padding: 0 15px 40px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  margin-bottom: 15px;
  background-color: rgba(23, 33, 122, 0.2);
}

.mainBox .panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 3px solid white;
  border-top: 3px solid white;
  content: "";
}

.mainBox .panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 3px solid white;
  border-top: 3px solid white;
  content: "";
}

.mainBox .panel .panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.mainBox .panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  content: "";
}

.mainBox .panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  content: "";
}

.mainBox .panel h2 {
  height: 48px;
  color: #fff;
  line-height: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}

.mainBox .panel h2 a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

.mainBox .panel .chart {
  height: 100%;
}

.bottomBox {
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
}

.go-home {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  text-align: center;
  top: 88%;
  /*background-color: blue;*/
}

.no {
  display: flex;
  position: relative;
  margin-top: 10px;
}

.no div {
  flex: 1;
}

.no-bd {
  position: relative;
  padding: 10px;
}

.no-bd::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  height: 60px;
  width: 5px;
  background-color: #123dbf;
}

.no-bd ul {
  display: flex;
  flex-direction: column;
}

.no-bd li {
  text-align: left;
  list-style: none;
  flex: 1;
}

.no-bd ul li:nth-child(1) {
  font-size: 20px;
  font-family: electronicFont;
  color: white;
}

.no-bd ul li:nth-child(2) {
  flex: 3;
  font-size: 30px;
  font-family: electronicFont;
  color: red;
}

.column .index {
  padding-top: 40px;
  height: 1035px;
}

.column .index p {
  line-height: 60px;
  font-size: 40px;
  color: white;
  font-weight: bold;
}

.task-bd-item {
  width: 150px;
  height: 110px;
  margin-left: 10px;
  float: left;
  margin-top: 10px;
  padding-top: 15px;
  padding-left: 10px;
  background-color: rgba(22, 41, 144, 0.2);
}

.task-bd-item ul li:nth-child(1) {
  color: white;
  text-align: left;
  font-size: 20px;
}

.task-bd-item ul li:nth-child(2) {
  color: white;
  font-family: electronicFont;
  font-size: 45px;
}

.hd {
  color: white;
  font-size: 30px;
  height: 100px;
  line-height: 100px;
}

.right-bottom {
  display: flex;
}

.right-bottom div {
  flex: 1;
}

.data-bd {
  margin: auto;
}

.data-bd-item {
  width: 200px;
  height: 110px;
  margin-left: 22px;
  margin-top: 40px;
  float: left;
  padding-top: 15px;
  padding-left: 10px;
  background-color: rgba(22, 41, 144, 0.2);
}

.steam-bottom {
  display: flex;
  padding-top: 5px;
}

.steam-bottom div {
  flex: 1;
}
</style>
